import { useState } from 'react';
import { createPortal } from 'react-dom';
import options from './pc.js'
import { CascadePicker } from 'antd-mobile'

export default function BooleanSelector({ value, onChange }) {
  const [visible, setVisible] = useState(false);
  const [pickerValue, setPickerValue] = useState();
  const [pickerLabel, setPickerLabel] = useState();
  const options = [ { label: '是', value: '1' }, { label: '不是', value: '0' } ]// 0 不是；1 是
  const handleConfirm = (val, items) => {
    console.log('onConfirm', val, items)
    setPickerValue([items[0].value])
    setPickerLabel([items[0].label])
    onChange([items[0].value]);
    setVisible(false);
  };

  // 创建遮罩层组件
  const ModalContent = visible ? (
    <div 
      className="fixed inset-0 z-50 bg-opacity-50 w-[100vw] h-[100vh]"
    >
      <div className="w-full absolute bottom-[0] bg-[#FFFFFF] inset-0 flex items-center justify-center">
        <div className="bg-white rounded-lg w-[90%] max-w-md max-h-[80vh] flex flex-col">          
          {/* 选择器内容 */}
          <div className="flex p-4 flex-1 overflow-auto">                 
            <CascadePicker
              title='选择'
              options={options}
              defaultValue={pickerValue}
              visible={visible}
              onClose={() => {
                setVisible(false)
              }}
              onConfirm={(val, extend) => {
                handleConfirm(val, extend.items)
              }}
              onSelect={val => {
                console.log('onSelect', val)
              }}
            />
          </div>
        </div>
      </div>
    </div>
  ) : null;

  return (
    <>
      <div 
        className="border border-[#CECECE] rounded-[8px] p-[12px] text-[14px] text-left text-[#8F9098]"
        onClick={() => setVisible(true)}
      >
        {pickerLabel ? <span className='text-[#000000]'>{pickerLabel}</span> : <span className='text-[#8F9098]'>请选择</span>}
      </div>
      
      {/* 将模态框渲染到body上 */}
      {visible && createPortal(ModalContent, document.body)}
    </>
  );
}